CSS ಕೌಂಟರ್ ಶೈಲಿ ಭಾಷಾ ಬೆಂಬಲ: ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಅಂತರರಾಷ್ಟ್ರೀಯ ಲೊಕಲೈಸೇಶನ್ ಫಾರ್ಮ್ಯಾಟಿಂಗ್

ಇಂದಿನ ಜಾಗತಿಕವಾಗಿ ಸಂಪರ್ಕ ಹೊಂದಿದ ಜಗತ್ತಿನಲ್ಲಿ, ವೆಬ್ ಡೆವಲಪರ್‌ಗಳು ವೈವಿಧ್ಯಮಯ ಪ್ರೇಕ್ಷಕರಿಗೆ ಸೇವೆ ಸಲ್ಲಿಸುವ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಬೇಕಾಗುತ್ತದೆ. ಇದರರ್ಥ ಕೇವಲ ಭಾಷೆಯನ್ನು ಮಾತ್ರವಲ್ಲದೆ, ವಿಭಿನ್ನ ಪ್ರದೇಶಗಳಲ್ಲಿ ಬಳಸಲಾಗುವ ಸಾಂಸ್ಕೃತಿಕ ಸಂಪ್ರದಾಯಗಳು ಮತ್ತು ಸಂಖ್ಯೆ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಪರಿಗಣಿಸುವುದು. CSS ಕೌಂಟರ್ ಶೈಲಿಗಳು ಈ ಸಾಂಸ್ಕೃತಿಕ ಸೂಕ್ಷ್ಮತೆಗಳನ್ನು ಗೌರವಿಸುವ ರೀತಿಯಲ್ಲಿ ಪಟ್ಟಿಗಳು ಮತ್ತು ಇತರ ಸಂಖ್ಯೆಯ ವಿಷಯಗಳನ್ನು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲು ಒಂದು ಶಕ್ತಿಯುತ ಕಾರ್ಯವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತವೆ. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ಅಂತರರಾಷ್ಟ್ರೀಯ ಲೊಕಲೈಸೇಶನ್‌ಗಾಗಿ (i18n) CSS ಕೌಂಟರ್ ಶೈಲಿಗಳ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ ಮತ್ತು ಅವುಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

CSS ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

CSS ಕೌಂಟರ್‌ಗಳು CSS ನಿಯಮಗಳಿಂದ ನಿರ್ವಹಿಸಲ್ಪಡುವ ವೇರಿಯೇಬಲ್‌ಗಳಾಗಿವೆ, ಅವು ಎಷ್ಟು ಬಾರಿ ಬಳಸಲ್ಪಡುತ್ತವೆ ಎಂಬುದನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತವೆ. ಅವು ಮುಖ್ಯವಾಗಿ ಪಟ್ಟಿಗಳು, ಹೆಡರ್‌ಗಳು ಮತ್ತು ಇತರ ಅಂಶಗಳನ್ನು ಸಂಖ್ಯೆ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ. CSS ಕೌಂಟರ್ ಶೈಲಿಗಳು ಪ್ರಮಾಣಿತ ಅರೇಬಿಕ್ ಮತ್ತು ರೋಮನ್ ಅಂಕೆಗಳ ಹೊರತಾಗಿ ಕಸ್ಟಮ್ ಸಂಖ್ಯೆ ವ್ಯವಸ್ಥೆಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಮೂಲಕ ಈ ಕಾರ್ಯವನ್ನು ವಿಸ್ತರಿಸುತ್ತವೆ. ವಿಭಿನ್ನ ಭಾಷೆಗಳು ಮತ್ತು ಸಾಂಸ್ಕೃತಿಕ ಆದ್ಯತೆಗಳನ್ನು ಬೆಂಬಲಿಸಲು ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.

ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ಬಳಸುವಲ್ಲಿ ಒಳಗೊಂಡಿರುವ ಮುಖ್ಯ CSS ಗುಣಲಕ್ಷಣಗಳು:

• counter-reset: ಕೌಂಟರ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟ ಮೌಲ್ಯಕ್ಕೆ ಪ್ರಾರಂಭಿಸುತ್ತದೆ ಅಥವಾ ಮರುಹೊಂದಿಸುತ್ತದೆ.
• counter-increment: ಕೌಂಟರ್‌ನ ಮೌಲ್ಯವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.
• content: ಕೌಂಟರ್‌ನ ಮೌಲ್ಯವನ್ನು ಪ್ರದರ್ಶಿಸಲು ::before ಅಥವಾ ::after ಸೂಡೊ-ಎಲಿಮೆಂಟ್‌ಗಳೊಂದಿಗೆ ಬಳಸಲಾಗುತ್ತದೆ.
• counter() ಅಥವಾ counters(): ಕೌಂಟರ್‌ನ ಮೌಲ್ಯವನ್ನು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲು content ಗುಣಲಕ್ಷಣದೊಳಗೆ ಬಳಸುವ ಕಾರ್ಯಗಳು.
• @counter-style: ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ನಿಯಂತ್ರಿಸಲು ವಿವಿಧ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಕಸ್ಟಮ್ ಕೌಂಟರ್ ಶೈಲಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.

@counter-style ನ ಶಕ್ತಿ

@counter-style ನಿಯಮವು CSS ಕೌಂಟರ್ ಶೈಲಿ ಅಂತರರಾಷ್ಟ್ರೀಯ ಲೊಕಲೈಸೇಶನ್‌ನ ಹೃದಯಭಾಗವಾಗಿದೆ. ಇದು ಕೌಂಟರ್ ಮೌಲ್ಯವನ್ನು ಹೇಗೆ ರೆಂಡರ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸುವ ವಿವಿಧ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಕಸ್ಟಮ್ ಸಂಖ್ಯೆ ವ್ಯವಸ್ಥೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. @counter-style ನಿಯಮದೊಳಗೆ ಪ್ರಮುಖ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಪರಿಶೀಲಿಸೋಣ:

• system: ಕೌಂಟರ್ ಪ್ರಾತಿನಿಧ್ಯವನ್ನು ರಚಿಸಲು ಬಳಸಲಾಗುವ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಸಾಮಾನ್ಯ ಮೌಲ್ಯಗಳು cyclic, numeric, alphabetic, symbolic, fixed, ಮತ್ತು additive ಗಳನ್ನು ಒಳಗೊಂಡಿವೆ.
• symbols: ಸಂಖ್ಯೆಗಳು, ಅಕ್ಷರಗಳು ಅಥವಾ ಕಸ್ಟಮ್ ಅಕ್ಷರಗಳಂತಹ ಕೌಂಟರ್ ಶೈಲಿಗೆ ಬಳಸಲಾಗುವ ಚಿಹ್ನೆಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
• additive-symbols: ಚಿಹ್ನೆಗಳು ಮತ್ತು ಅವುಗಳ ಅನುಗುಣವಾದ ಸಂಖ್ಯಾ ಮೌಲ್ಯಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು additive ವ್ಯವಸ್ಥೆಯೊಂದಿಗೆ ಬಳಸಲಾಗುತ್ತದೆ.
• suffix: ಪ್ರತಿ ಕೌಂಟರ್ ಪ್ರಾತಿನಿಧ್ಯದ ನಂತರ ಸೇರಿಸಲಾಗುವ ಪಠ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ (ಉದಾ., ಒಂದು ಅವಧಿ ಅಥವಾ ಮುಚ್ಚುವ ಬ್ರಾಕೆಟ್).
• prefix: ಪ್ರತಿ ಕೌಂಟರ್ ಪ್ರಾತಿನಿಧ್ಯದ ಮೊದಲು ಸೇರಿಸಲಾಗುವ ಪಠ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.
• range: ಕೌಂಟರ್ ಶೈಲಿಯು ಅನ್ವಯವಾಗುವ ಮೌಲ್ಯಗಳ ವ್ಯಾಪ್ತಿಯನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ.
• pad: ಕನಿಷ್ಠ ಅಂಕಿಯ ಸಂಖ್ಯೆಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ, ಅಗತ್ಯವಿದ್ದರೆ ಮುನ್ನಡೆಯಲ್ಲಿ ಸೊನ್ನೆಗಳೊಂದಿಗೆ ಪ್ಯಾಡಿಂಗ್ ಮಾಡುತ್ತದೆ.
• speak-as: ಪ್ರವೇಶಿಸುವಿಕೆಗಾಗಿ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಗಾಗಿ ಕೌಂಟರ್ ಮೌಲ್ಯವನ್ನು ಹೇಗೆ ಘೋಷಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ.
• fallback: ಬ್ರೌಸರ್ ಪ್ರಸ್ತುತ ಶೈಲಿಯನ್ನು ಬೆಂಬಲಿಸದಿದ್ದರೆ ಬಳಸಲು ಹಿಮ್ಮುಖ ಕೌಂಟರ್ ಶೈಲಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.

@counter-style ನೊಂದಿಗೆ ಅಂತರರಾಷ್ಟ್ರೀಯ ಲೊಕಲೈಸೇಶನ್ ಉದಾಹರಣೆಗಳು

ಈಗ, ವಿಭಿನ್ನ ಭಾಷೆಗಳು ಮತ್ತು ಸಾಂಸ್ಕೃತಿಕ ಸಂದರ್ಭಗಳಿಗಾಗಿ ಕೌಂಟರ್‌ಗಳನ್ನು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲು @counter-style ಅನ್ನು ಬಳಸುವ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.

1. ಅರೇಬಿಕ್ ಅಂಕಿಗಳೊಂದಿಗೆ ಅರೇಬಿಕ್-ಇಂಡಿಕ್ ಅಂಕೆಗಳು

ಅರೇಬಿಕ್ ಅಂಕೆಗಳು (0-9) ವ್ಯಾಪಕವಾಗಿ ಬಳಸಲಾಗಿದ್ದರೂ, ಅನೇಕ ಅರೇಬಿಕ್ ಮಾತನಾಡುವ ಪ್ರದೇಶಗಳು ಅರೇಬಿಕ್-ಇಂಡಿಕ್ ಅಂಕೆಗಳನ್ನು (٠‎-٩‎) ಬಳಸಲು ಆದ್ಯತೆ ನೀಡುತ್ತವೆ. ಇದನ್ನು ಸಾಧಿಸಲು ನಾವು ಕೌಂಟರ್ ಶೈಲಿಯನ್ನು ರಚಿಸಬಹುದು:

@counter-style arabic-indic {
  system: numeric;
  symbols: '٠' '١' '٢' '٣' '٤' '٥' '٦' '٧' '٨' '٩';
  suffix: '. ';
}

ol {
  list-style: none;
  counter-reset: item;
}

ol li {
  counter-increment: item;
}

ol li::before {
  content: counter(item, arabic-indic);
}

ಈ ಕೋಡ್ arabic-indic ಎಂಬ ಕೌಂಟರ್ ಶೈಲಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಅದು ಅರೇಬಿಕ್-ಇಂಡಿಕ್ ಅಂಕೆಗಳನ್ನು ಚಿಹ್ನೆಗಳಾಗಿ ಬಳಸುತ್ತದೆ. suffix ಗುಣಲಕ್ಷಣವು ಪ್ರತಿ ಸಂಖ್ಯೆಯ ನಂತರ ಒಂದು ಅವಧಿ ಮತ್ತು ಒಂದು ಅಂತರವನ್ನು ಸೇರಿಸುತ್ತದೆ. CSS ನಂತರ ಈ ಶೈಲಿಯನ್ನು ಆರ್ಡರ್ಡ್ ಪಟ್ಟಿ (<ol>) ಗೆ ಅನ್ವಯಿಸುತ್ತದೆ, ಸಂಖ್ಯೆಗಳನ್ನು ಅರೇಬಿಕ್-ಇಂಡಿಕ್ ಫಾರ್ಮ್ಯಾಟ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲು.

2. ರೋಮನ್ ಅಂಕೆಗಳು (ದೊಡ್ಡಕ್ಷರ ಮತ್ತು ಸಣ್ಣಕ್ಷರ)

ರೋಮನ್ ಅಂಕೆಗಳು ವಿವಿಧ ಸಂದರ್ಭಗಳಲ್ಲಿ ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸಲ್ಪಡುತ್ತವೆ, ಮತ್ತು CSS ಕೌಂಟರ್ ಶೈಲಿಗಳು ಅವುಗಳನ್ನು ಸುಲಭವಾಗಿ ನಿರ್ವಹಿಸಬಹುದು:

@counter-style upper-roman {
  system: upper-roman;
}

@counter-style lower-roman {
  system: lower-roman;
}

ol.upper-roman {
  list-style: none;
  counter-reset: item;
}

ol.upper-roman li {
  counter-increment: item;
}

ol.upper-roman li::before {
  content: counter(item, upper-roman) '. ';
}

ol.lower-roman {
  list-style: none;
  counter-reset: item;
}

ol.lower-roman li {
  counter-increment: item;
}

ol.lower-roman li::before {
  content: counter(item, lower-roman) '. ';
}

ಈ ಉದಾಹರಣೆಯು ದೊಡ್ಡಕ್ಷರ (upper-roman) ಮತ್ತು ಸಣ್ಣಕ್ಷರ (lower-roman) ರೋಮನ್ ಅಂಕೆಗಳ ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ನೀವು ನಂತರ CSS ತರಗತಿಗಳನ್ನು (.upper-roman ಮತ್ತು .lower-roman) ಬಳಸಿಕೊಂಡು ವಿಭಿನ್ನ ಪಟ್ಟಿಗಳಿಗೆ ಈ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ:

<ol class="upper-roman">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<ol class="lower-roman">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

3. ಜಾರ್ಜಿಯನ್ ಅಂಕೆಗಳು

ಜಾರ್ಜಿಯನ್ ಅಂಕೆಗಳು ಸಂಖ್ಯೆಗಳನ್ನು ಪ್ರತಿನಿಧಿಸಲು ವಿಶಿಷ್ಟವಾದ ಅಕ್ಷರ ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಸುತ್ತವೆ. ಸಂಖ್ಯೆಗಳನ್ನು ಜಾರ್ಜಿಯನ್ ಭಾಷೆಯಲ್ಲಿ ಪ್ರತಿನಿಧಿಸಲು ನಾವು ಕೌಂಟರ್ ಶೈಲಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು:

@counter-style georgian {
  system: fixed;
  symbols: 'ა' 'ბ' 'გ' 'დ' 'ე' 'ვ' 'ზ' 'თ' 'ი' 'კ' 'ლ' 'მ' 'ნ' 'ო' 'პ' 'ჟ' 'რ' 'ს' 'ტ' 'უ' 'ಙ' 'ಖ' 'ಘ' 'ಚ' 'ಛ' 'ಜ' 'ಝ' 'ಞ' 'ಟ' 'ಜ' 'ಟ' 'ಞ' 'ಜ' 'ಟ';
  suffix: '. ';
  range: 1 33;
}

ol.georgian {
  list-style: none;
  counter-reset: item;
}

ol.georgian li {
  counter-increment: item;
}

ol.georgian li::before {
  content: counter(item, georgian);
}

ಈ ಉದಾಹರಣೆಯು fixed ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಸುತ್ತದೆ ಏಕೆಂದರೆ ಜಾರ್ಜಿಯನ್ ಸಂಖ್ಯೆ ವ್ಯವಸ್ಥೆಯು ಮೊದಲ 33 ಸಂಖ್ಯೆಗಳಿಗೆ ಸೀಮಿತ ಚಿಹ್ನೆಗಳನ್ನು ಹೊಂದಿದೆ. range ಗುಣಲಕ್ಷಣವು ಕೌಂಟರ್ ಶೈಲಿಯನ್ನು 1 ಮತ್ತು 33 ರ ನಡುವಿನ ಮೌಲ್ಯಗಳಿಗೆ ಸೀಮಿತಗೊಳಿಸುತ್ತದೆ. 33 ಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಗಳಿಗೆ, ನೀವು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ತರ್ಕ ಅಥವಾ ವಿಭಿನ್ನ ಸಂಖ್ಯೆ ವ್ಯವಸ್ಥೆಯನ್ನು ಅಳವಡಿಸಬೇಕಾಗಬಹುದು.

4. ಅರ್ಮೇನಿಯನ್ ಅಂಕೆಗಳು

ಜಾರ್ಜಿಯನ್ ಅಂಕೆಗಳಂತೆಯೇ, ಅರ್ಮೇನಿಯನ್ ಅಂಕೆಗಳು ಸಹ ಸಂಖ್ಯೆಗಳನ್ನು ಪ್ರತಿನಿಧಿಸಲು ಅಕ್ಷರಗಳನ್ನು ಬಳಸುತ್ತವೆ:

@counter-style armenian {
  system: fixed;
  symbols: 'Ա' 'Բ' 'Գ' 'Դ' 'Ե' 'Զ' 'Է' 'Ը' 'Թ' 'Ժ' 'Ի' 'Լ' 'Խ' 'Ծ' 'Կ' 'Հ' 'Ձ' 'Ղ' 'Ճ' 'Մ' 'Յ' 'Ն' 'Շ' 'Ո' 'Չ' 'Պ' 'Ջ' 'Ռ' 'Ս' 'Վ' 'Տ' 'Ր' 'Ց' 'ಖ' 'ಗ' 'ಘ' 'ಙ';
  suffix: '. ';
  range: 1 39;
}

ol.armenian {
  list-style: none;
  counter-reset: item;
}

ol.armenian li {
  counter-increment: item;
}

ol.armenian li::before {
  content: counter(item, armenian);
}

ಈ ಉದಾಹರಣೆಯು ಜಾರ್ಜಿಯನ್ ಉದಾಹರಣೆಗೆ ಹೋಲುತ್ತದೆ, fixed ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಸುತ್ತದೆ ಮತ್ತು ಅರ್ಮೇನಿಯನ್ ಅಕ್ಷರಗಳನ್ನು ಚಿಹ್ನೆಗಳಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. range ಅನ್ನು 1-39 ಗೆ ಹೊಂದಿಸಲಾಗಿದೆ, ಇದು ಮೂಲ ಅರ್ಮೇನಿಯನ್ ಅಂಕೆಗಳ ಸೆಟ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ.

5. CJK ಅಂಕೆಗಳು (ಚೈನೀಸ್, ಜಪಾನೀಸ್, ಕೊರಿಯನ್)

CJK ಅಂಕೆಗಳು ಹೆಚ್ಚು ಸಂಕೀರ್ಣತೆಯನ್ನು ನೀಡುತ್ತವೆ, ಔಪಚಾರಿಕ ಮತ್ತು ಅನೌಪಚಾರಿಕ ಸಂದರ್ಭಗಳಿಗೆ ವಿಭಿನ್ನ ರೂಪಗಳು ಮತ್ತು ಗ್ರ್ಯಾನ್ಯುಲಾರಿಟಿಯ ವಿಭಿನ್ನ ಮಟ್ಟಗಳು. ಸರಳೀಕೃತ ಚೈನೀಸ್ ಅನ್ನು ನೋಡೋಣ:

@counter-style simplified-chinese {
  system: numeric;
  symbols: '一' '二' '三' '四' '五' '六' '七' '八' '九';
  suffix: '';
}

@counter-style simplified-chinese-formal {
  system: fixed;
  symbols: '零' '壹' '贰' '叁' '肆' '伍' '陆' '柒' '捌' '玖';
  suffix: '';
}

ol.simplified-chinese {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese li {
  counter-increment: item;
}

ol.simplified-chinese li::before {
  content: counter(item, simplified-chinese) '、';
}

ol.simplified-chinese-formal {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese-formal li {
  counter-increment: item;
}

ol.simplified-chinese-formal li::before {
  content: counter(item, simplified-chinese-formal) '、';
}

ಇದು ಸರಳೀಕೃತ ಪ್ರಾತಿನಿಧ್ಯವಾಗಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ದೊಡ್ಡ ಸಂಖ್ಯೆಗಳಿಗಾಗಿ ಪೂರ್ಣ CJK ಅಂಕೆಗಳ ಬೆಂಬಲಕ್ಕೆ additive ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಮತ್ತು ಸ್ಥಳ ಮೌಲ್ಯಗಳನ್ನು (ಹತ್ತಾರು, ನೂರಾರು, ಸಾವಿರಾರು, ಇತ್ಯಾದಿ) ನಿರ್ವಹಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುವ ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಅನುಷ್ಠಾನದ ಅಗತ್ಯವಿದೆ. ಈ ಕೋಡ್ ಮೂಲ ಅಂಕಿಗಳ ಪ್ರಾತಿನಿಧ್ಯವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

ಮುಂದುವರಿದ ತಂತ್ರಗಳು ಮತ್ತು ಪರಿಗಣನೆಗಳು

1. ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು

ನೀವು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಸಂಖ್ಯೆಯ ಯೋಜನೆಗಳನ್ನು ರಚಿಸಲು ಬಹು ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ಸಂಯೋಜಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೀವು ಅಧ್ಯಾಯಗಳಿಗಾಗಿ ಪ್ರಾಥಮಿಕ ಕೌಂಟರ್ ಮತ್ತು ಪ್ರತಿ ಅಧ್ಯಾಯದೊಳಗಿನ ವಿಭಾಗಗಳಿಗಾಗಿ ದ್ವಿತೀಯ ಕೌಂಟರ್ ಅನ್ನು ಬಳಸಬಹುದು.

body {
  counter-reset: chapter section;
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h2 {
  counter-increment: section;
}

h1::before {
  content: counter(chapter) '. ';
}

h2::before {
  content: counter(chapter) '.' counter(section) '. ';
}

ಈ ಕೋಡ್ ಶ್ರೇಣೀಕೃತ ಸಂಖ್ಯೆ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸುತ್ತದೆ, ಅಲ್ಲಿ ಅಧ್ಯಾಯಗಳನ್ನು ಸತತವಾಗಿ ಸಂಖ್ಯೆ ಮಾಡಲಾಗುತ್ತದೆ ಮತ್ತು ವಿಭಾಗಗಳನ್ನು ಪ್ರತಿ ಅಧ್ಯಾಯದಲ್ಲಿ ಸಂಖ್ಯೆ ಮಾಡಲಾಗುತ್ತದೆ (ಉದಾ., 1.1, 1.2, 2.1, 2.2).

2. ಪ್ರವೇಶಿಸುವಿಕೆ ಪರಿಗಣನೆಗಳು

ನಿಮ್ಮ ಕೌಂಟರ್ ಶೈಲಿಗಳು ಅಂಗವಿಕಲ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಕೌಂಟರ್ ಮೌಲ್ಯವನ್ನು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಹೇಗೆ ಘೋಷಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸಲು speak-as ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿ. ಉದಾಹರಣೆಗೆ:

@counter-style my-style {
  system: numeric;
  symbols: '1' '2' '3';
  speak-as: numbers;
}

speak-as: numbers; ಗುಣಲಕ್ಷಣವು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗೆ ಕೌಂಟರ್ ಮೌಲ್ಯವನ್ನು ಸಂಖ್ಯೆಯಾಗಿ ಘೋಷಿಸಲು ಹೇಳುತ್ತದೆ. ಇತರ ಆಯ್ಕೆಗಳು spell-out (ಸಂಖ್ಯೆಯನ್ನು ಅಕ್ಷರಗಳಲ್ಲಿ ಬರೆಯಲು) ಮತ್ತು bullets (ಕೌಂಟರ್ ಅನ್ನು ಬುಲೆಟ್ ಪಾಯಿಂಟ್‌ಗಳಾಗಿ ಘೋಷಿಸಲು) ಗಳನ್ನು ಒಳಗೊಂಡಿವೆ.

ಹೆಚ್ಚುವರಿಯಾಗಿ, ನಿಮ್ಮ ಕೌಂಟರ್ ಶೈಲಿಗಳಲ್ಲಿ ಬಳಸಲಾಗುವ ಯಾವುದೇ ಕಸ್ಟಮ್ ಚಿಹ್ನೆಗಳಿಗೆ ಪರ್ಯಾಯ ಪಠ್ಯ ಅಥವಾ ವಿವರಣೆಗಳನ್ನು ಒದಗಿಸಿ, ಇದರಿಂದ ದೃಷ್ಟಿಹೀನ ಬಳಕೆದಾರರು ಸಂಖ್ಯೆಯ ವಿಷಯದ ಅರ್ಥವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬಹುದು.

3. ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

CSS ಕೌಂಟರ್ ಶೈಲಿಗಳು ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಿಂದ ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿತವಾಗಿದ್ದರೂ, ಹಳೆಯ ಬ್ರೌಸರ್ ಆವೃತ್ತಿಗಳನ್ನು ಪರಿಗಣಿಸುವುದು ಮುಖ್ಯ. ಬ್ರೌಸರ್ ಪ್ರಾಥಮಿಕ ಶೈಲಿಯನ್ನು ಬೆಂಬಲಿಸದಿದ್ದರೆ ಬಳಸಲಾಗುವ ಹಿಮ್ಮುಖ ಕೌಂಟರ್ ಶೈಲಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು fallback ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿ. ಉದಾಹರಣೆಗೆ:

@counter-style my-style {
  system: cyclic;
  symbols: '✓' '✗';
  fallback: disc;
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಬ್ರೌಸರ್ cyclic ವ್ಯವಸ್ಥೆಯನ್ನು ಅಥವಾ ಕಸ್ಟಮ್ ಚಿಹ್ನೆಗಳನ್ನು ಬೆಂಬಲಿಸದಿದ್ದರೆ, ಅದು disc ಪಟ್ಟಿ ಶೈಲಿಗೆ ಹಿಮ್ಮುಖವಾಗುತ್ತದೆ.

4. ಸಾಂಸ್ಕೃತಿಕ ಸೂಕ್ಷ್ಮತೆ

ವಿಭಿನ್ನ ಭಾಷೆಗಳು ಮತ್ತು ಸಂಸ್ಕೃತಿಗಳಿಗೆ ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ಅಳವಡಿಸುವಾಗ, ಸಾಂಸ್ಕೃತಿಕ ಸೂಕ್ಷ್ಮತೆಗಳನ್ನು ಗಮನಿಸಿ. ಪ್ರತಿ ಪ್ರದೇಶದಲ್ಲಿ ಬಳಸಲಾಗುವ ಸೂಕ್ತ ಸಂಖ್ಯೆ ಸಂಪ್ರದಾಯಗಳು ಮತ್ತು ಚಿಹ್ನೆಗಳನ್ನು ಸಂಶೋಧಿಸಿ. ಯಾವುದೇ ಚಿಹ್ನೆಗಳು ಅಥವಾ ಸ್ವರೂಪಗಳು ಆಕ್ರಮಣಕಾರಿ ಅಥವಾ ಅನುಚಿತವಾಗಿರಬಹುದು ಎಂಬುದನ್ನು ತಪ್ಪಿಸಿ.

ಉದಾಹರಣೆಗೆ, ಕೆಲವು ಸಂಸ್ಕೃತಿಗಳು ತಮ್ಮ ಸಂಖ್ಯೆ ವ್ಯವಸ್ಥೆಗಳಲ್ಲಿ ವಿಭಿನ್ನ ವಿರಾಮ ಚಿಹ್ನೆಗಳು ಅಥವಾ ವಿಭಾಜಕಗಳನ್ನು ಬಳಸಲು ಆದ್ಯತೆ ನೀಡಬಹುದು. ನಿಮ್ಮ ಕೌಂಟರ್ ಶೈಲಿಗಳು ಈ ಆದ್ಯತೆಗಳನ್ನು ಗೌರವಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳು ಮತ್ತು ಬಳಕೆ ಪ್ರಕರಣಗಳು

CSS ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಸನ್ನಿವೇಶಗಳ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯಲ್ಲಿ ಬಳಸಬಹುದು, ಅವುಗಳೆಂದರೆ:

• ವಿಷಯಗಳ ಕೋಷ್ಟಕವನ್ನು ರಚಿಸುವುದು: ವಿಷಯಗಳ ಕೋಷ್ಟಕದಲ್ಲಿ ಹೆಡರ್‌ಗಳು ಮತ್ತು ಉಪ-ಹೆಡರ್‌ಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸಂಖ್ಯೆ ಮಾಡುವುದು.
• ಸಂಖ್ಯೆಯ ಪಟ್ಟಿಗಳನ್ನು ರಚಿಸುವುದು: ವಿಭಿನ್ನ ಭಾಷೆಗಳು ಮತ್ತು ಶೈಲಿಗಳಲ್ಲಿ ಸಂಖ್ಯೆಯ ಪಟ್ಟಿಗಳನ್ನು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡುವುದು.
• ಟ್ಯುಟೋರಿಯಲ್‌ನಲ್ಲಿ ಹಂತಗಳನ್ನು ಸಂಖ್ಯೆ ಮಾಡುವುದು: ಸ್ಪಷ್ಟ ಮತ್ತು ದೃಷ್ಟಿ ಆಕರ್ಷಕ ಸಂಖ್ಯೆಯೊಂದಿಗೆ ಹಂತಗಳ ಸರಣಿಯ ಮೂಲಕ ಬಳಕೆದಾರರಿಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡುವುದು.
• ಕಸ್ಟಮ್ ಪುಟಗಳ ಅಳವಡಿಕೆ: ಅನನ್ಯ ಸಂಖ್ಯೆಯ ಯೋಜನೆಗಳೊಂದಿಗೆ ಕಸ್ಟಮ್ ಪುಟಗಳ ನಿಯಂತ್ರಣಗಳನ್ನು ರಚಿಸುವುದು.
• ಶ್ರೇಣಿ ಪಟ್ಟಿಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವುದು: ವಿಭಿನ್ನ ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ದೃಷ್ಟಿ ಆಕರ್ಷಕ ರೀತಿಯಲ್ಲಿ ಶ್ರೇಣಿಗಳನ್ನು ತೋರಿಸುವುದು.
• ಕಾನೂನು ದಾಖಲೆಗಳನ್ನು ರಚಿಸುವುದು: ನಿರ್ದಿಷ್ಟ ಸಂಖ್ಯೆಯ ಅವಶ್ಯಕತೆಗಳೊಂದಿಗೆ ಕಾನೂನು ದಾಖಲೆಗಳನ್ನು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡುವುದು.
• ವೈಜ್ಞಾನಿಕ ಪತ್ರಿಕೆಗಳನ್ನು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡುವುದು: ಸೂಕ್ತವಾದ ಸಂಖ್ಯೆಯೊಂದಿಗೆ ಸಮೀಕರಣಗಳು, ಅಂಕಿಅಂಶಗಳು ಮತ್ತು ಕೋಷ್ಟಕಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವುದು.

CSS ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ನಿಮ್ಮ CSS ಕೌಂಟರ್ ಶೈಲಿಗಳು ಪರಿಣಾಮಕಾರಿ ಮತ್ತು ನಿರ್ವಹಣಾ ಯೋಗ್ಯವಾಗಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸಿ:

• ನಿಮ್ಮ ಕೌಂಟರ್ ಶೈಲಿಗಳಿಗೆ ವಿವರಣಾತ್ಮಕ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ: ಶೈಲಿಯ ಉದ್ದೇಶ ಮತ್ತು ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಸೂಚಿಸುವ ಹೆಸರುಗಳನ್ನು ಆರಿಸಿ (ಉದಾ., arabic-indic, upper-roman, georgian).
• ನಿಮ್ಮ ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ಮಾಡ್ಯುಲರ್ ಆಗಿ ಇರಿಸಿ: ವಿಭಿನ್ನ ಭಾಷೆಗಳು ಮತ್ತು ಸಂಖ್ಯೆ ವ್ಯವಸ್ಥೆಗಳಿಗೆ ಪ್ರತ್ಯೇಕ ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ.
• ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು CSS ತರಗತಿಗಳನ್ನು ಬಳಸಿ: ನೇರವಾಗಿ ಅಂಶಗಳಿಗೆ ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ; ಬದಲಿಗೆ, ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ನಿಯಂತ್ರಿಸಲು CSS ತರಗತಿಗಳನ್ನು ಬಳಸಿ.
• ನಿಮ್ಮ ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ಅವು ಸರಿಯಾಗಿ ರೆಂಡರ್ ಆಗುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿಭಿನ್ನ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ನಿಮ್ಮ ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ.
• ನಿಮ್ಮ ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ದಾಖಲಿಸಿ: ಅವುಗಳ ಉದ್ದೇಶ, ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಮತ್ತು ಬಳಕೆಯನ್ನು ಒಳಗೊಂಡಂತೆ ನಿಮ್ಮ ಕೌಂಟರ್ ಶೈಲಿಗಳಿಗೆ ಸ್ಪಷ್ಟವಾದ ದಾಖಲಾತಿಯನ್ನು ಒದಗಿಸಿ.
• ಪ್ರವೇಶಿಸುವಿಕೆಗೆ ಆದ್ಯತೆ ನೀಡಿ: ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ರಚಿಸುವಾಗ ಯಾವಾಗಲೂ ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ಪರಿಗಣಿಸಿ ಮತ್ತು ಕೌಂಟರ್ ಮೌಲ್ಯಗಳು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಂದ ಸರಿಯಾಗಿ ಘೋಷಿಸಲ್ಪಡುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು speak-as ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿ.

ತೀರ್ಮಾನ

CSS ಕೌಂಟರ್ ಶೈಲಿಗಳು ವೆಬ್‌ನಲ್ಲಿ ಸಂಖ್ಯೆಯ ವಿಷಯದ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ಅಂತರರಾಷ್ಟ್ರೀಯಗೊಳಿಸಲು ಒಂದು ಶಕ್ತಿಶಾಲಿ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಕಾರ್ಯವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತವೆ. @counter-style ನಿಯಮ ಮತ್ತು ಅದರ ವಿವಿಧ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ವಿಭಿನ್ನ ಪ್ರದೇಶಗಳ ಸಾಂಸ್ಕೃತಿಕ ಸಂಪ್ರದಾಯಗಳು ಮತ್ತು ಭಾಷಾ ಸೂಕ್ಷ್ಮತೆಗಳನ್ನು ಗೌರವಿಸುವ ಕಸ್ಟಮ್ ಸಂಖ್ಯೆ ವ್ಯವಸ್ಥೆಗಳನ್ನು ರಚಿಸಬಹುದು. ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ ವಿವರಿಸಲಾದ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಕೌಂಟರ್ ಶೈಲಿಗಳು ಪರಿಣಾಮಕಾರಿ, ನಿರ್ವಹಣಾ ಯೋಗ್ಯ ಮತ್ತು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದಾಗಿದೆ ಎಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಮುಂದುವರೆದಂತೆ, ನಿಜವಾಗಿಯೂ ಸಮಗ್ರ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ವೆಬ್ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ಅಂತರರಾಷ್ಟ್ರೀಯ ಲೊಕಲೈಸೇಶನ್‌ಗಾಗಿ CSS ಕೌಂಟರ್ ಶೈಲಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮತ್ತು ಬಳಸುವುದು ಹೆಚ್ಚು ಮುಖ್ಯವಾಗುತ್ತದೆ. CSS ಕೌಂಟರ್ ಶೈಲಿಗಳ ಶಕ್ತಿಯನ್ನು ಸ್ವೀಕರಿಸಿ ಮತ್ತು ಪ್ರಪಂಚದ ಮೂಲೆ ಮೂಲೆಗಳಿಂದ ಬಳಕೆದಾರರೊಂದಿಗೆ ಪ್ರತಿಧ್ವನಿಸುವ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ರಚಿಸಿ.

ಹೆಚ್ಚಿನ ಓದುವಿಕೆ

• MDN ವೆಬ್ ಡಾಕ್ಸ್: @counter-style
• CSS ಕೌಂಟರ್ ಸ್ಟೈಲ್ಸ್ ಲೆವೆಲ್ 3
• CSS ಕೌಂಟರ್ ಸ್ಟೈಲ್ಸ್‌ನ ಸಂಪೂರ್ಣ ಮಾರ್ಗದರ್ಶಿ